<template>
    <div class="home-recommend">
        <div>
        <img class="ql" src="http://m.anportshop.com/Public/kindeditor/attached/image/20210514/20210514084440_96492.jpg">
        </div>
        <h2>近期热门</h2>
        <div class="shop">
            <div class="sp"
             v-for="item in lists"
             :key="item.id"
             @click="clickItem(item.id)"
             >
                <img :src="item.pic" alt="">
                <p>{{item.name }}</p>
                <div class="pv">
                    <span>￥{{ item.minPrice}}</span>
                   <van-icon @click.stop="addCart(item)" class-prefix="icon" name="-jia" />
                </div>
            </div>

        </div>
    </div>
</template>
<script>

export default {
  methods: {
    clickItem (id) {
      this.$emit('clickItem', id)
    },
    addCart (item) {
    // 将逻辑在父组件中处理
      console.log(item)
      item = {
        ...item,
        num: 1,
        checked: true
      }
      this.$emit('addCart', item)
    }
  },
  props: {
    lists: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang='scss' scoped>
.ql{
    width: 100%;
}
h2{
    color: pink;
    height: 45px;
    line-height: 45px;
    background-color: #fff;
}
.shop{
    flex-wrap:wrap;
    display: flex;
    .sp{
    position: relative;
    display: block;
    width: 170px;
    margin: 5px 5px;
    height: 250px;
    text-align: center;
    border-radius: 25px;
    background-color: #fff;
    img{
        margin: 2px auto;
        width: 80%;
        height: 140px;
    }
    p{
        position: absolute;
        margin: 0 10px;
        bottom: 55px;
        text-align: left;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .icon--jia{
        margin-right: 25px;
        font-size: 25px;
    }
    .pv{
        align-items: center;
        font-size: 25px;
        color: red;
        display: flex;
        width: 170px;
        height: 50px;
        justify-content:space-around;
        position: absolute;
        bottom: 0;
    }
}
}

</style>
